<template>
  <view class="form-wrapper">
  	<view class="head-box u-m-b-60">
  		<view class="head-title u-m-b-20">注册</view>
  		<view class="head-subtitle">请使用本人手机号完成注册</view>
  	</view>
  	<view class="form-item u-border-bottom">
  		<view class="item-content u-flex u-col-center">
  			<view class="item-title">手机号</view>
  			<u-input
  				class="u-m-r-10 u-flex-1"
  				placeholder="请输入手机号"
  				@blur="checkValue($event, 'mobile')"
  				@input="mobileInput($event, 'mobile')"
  				:placeholderStyle="placeholderStyle"
  				v-model="form.data.mobile"
  				type="number"
  			></u-input>
  			<!-- <button
  				class="u-reset-button btn-code btn-code-start"
  				:disabled="!form.data.isMobileEnd"
  				:class="{ 'btn-code-end': form.data.isMobileEnd }"
  				@tap="getSmsCode('register')"
  			>
  				{{ codeText }}
  			</button> -->
  		</view>
  		<view class="message-error">{{ form.error.mobile || '' }}</view>
  	</view>
  	<view class="form-item u-border-bottom">
  		<view class="item-content u-flex u-col-center">
  			<view class="item-title">密码</view>
  			<u-input
  				class="u-m-r-10 u-flex-1"
  				@blur="checkValue($event, 'password')"
  				@input="checkValue($event, 'password')"
  				placeholder="请输入密码"
  				:placeholderStyle="placeholderStyle"
  				v-model="form.data.password"
  				type="password"
  			></u-input>
  		</view>
  		<view class="message-error">{{ form.error.password || '' }}</view>
  	</view>
  	<!-- <view class="form-item u-border-bottom">
  		<view class="item-content u-flex u-col-center">
  			<view class="item-title">验证码</view>
  			<u-input
  				class="u-m-r-10 u-flex-1"
  				@blur="checkValue($event, 'code')"
  				@input="checkValue($event, 'code')"
  				placeholder="请输入验证码"
  				:placeholderStyle="placeholderStyle"
  				v-model="form.data.code"
  				type="number"
  			></u-input>
  		</view>
  		<view class="message-error">{{ form.error.code || '' }}</view>
  	</view> -->
  	<view class="btn-groups-wrapper">
  		<button class="u-reset-button btn-primary" @tap="registerSubmit">注册</button>
  		<button v-if="!isLogin" class="u-reset-button btn-text" @tap="showAuthModal('accountLogin')">返回登录</button>
  	</view>
  </view>
</template>

<script>
  import { mapGetters, mapActions } from 'vuex';
  import FormValidate from '@/utils/validate/form';
  
  export default {
  	name: 'Register',
    props: {
      placeholderStyle: {
        type: String,
        default: '',
      },
      protocol: {
        type: Boolean,
        required: true,
      },
      checkValue: {
        type: Function,
        required: true,
      },
      validation: {
        type: Function,
        required: true,
      },
      validateAll: {
        type: Function,
        required: true,
      },
      validateSubmit: {
        type: Function,
        required: true,
      },
      closeAuthModal: {
        type: Function,
        required: true,
      },
      getSmsCode: {
        type: Function,
        required: true,
      },
    },
  	data() {
  		return {
  			form: {
  				data: {
  					mobile: '', // 手机号
  					// code: '', // 验证码
  					password: '', // 密码
  					isMobileEnd: false // 手机号输入完毕
  				},
  				rules: {
  					// code: FormValidate.code,
  					mobile: FormValidate.mobile,
  					password: FormValidate.password
  				},
  				error: {
  					mobile: '', // 手机号
  					// code: '', // 验证码
  					password: '' // 密码
  				}
  			},
  		};
  	},
    computed:{
      ...mapGetters(['isLogin', 'authType']),
    },
  	methods: {
  		...mapActions(['getUserInfo', 'showAuthModal']),

  		async registerSubmit() {
  			let that = this;
  			// (await that.validateSubmit()) &&
  				that
  					.$http1(
  						'user.register',
  						// {
  						// 	mobile: that.form.data.mobile,
  						// 	code: that.form.data.code,
  						// 	password: that.form.data.password
  						// },
              {
              	account: that.form.data.mobile,
                phone: that.form.data.mobile,
              	password: that.form.data.password
              },
  						'注册中...'
  					)
  					.then(res => {
  						if (res.code === 1) {
  							that.$u.toast(res.msg);
  							that.closeAuthModal();
  							that.getUserInfo(res.data.token);
  						}
  					});
  		},
  	}
  };
</script>

<style lang="scss" scoped>
@import './style.scss';
</style>
